<template>
	<div ref="pie" class="pie-chart"></div>
</template>
<script>
	import * as echarts from 'echarts'
	import chartMixin from '@/mixins/chartMixin'
	export default {
		name: 'PieChart',
		props: {
			chartData: {
				type: Array,
				default: [],
			},
		},
		mixins: [chartMixin],
		methods: {
			initChart() {
				this.chart = echarts.init(this.$refs.pie)
				let option = {
					tooltip: {
						trigger: 'item',
					},
					color: ['#0487ED', '#28C6DD', '#21B795', '#FFAD3C', '#FF8104', '#A577FD'],
					legend: [
						{
							type: 'scroll',
							orient: 'vertical',
							top: 'middle',
							right: 100,
							icon: 'roundRect',
							itemWidth: 11,
							itemHeight: 11,
						},
						{
							type: 'scroll',
							orient: 'vertical',
							top: 'middle',
							right: 50,
							icon: 'none',
							formatter: function(name) {
								let item = option.series[0].data.find(el => {
									return el.name == name
								})
								return item.value
							},
						},
						{
							type: 'scroll',
							orient: 'vertical',
							top: 'middle',
							right: 0,
							icon: 'none',
							formatter: function(name) {
								let item = option.series[0].data.find(el => {
									return el.name == name
								})
								return item.rate
							},
						},
					],
					series: [
						{
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['30%', '50%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2,
							},
							label: {
								show: false,
								position: 'center',
								formatter: '{b}\n{c}',
								fontSize: 16,
							},
							emphasis: {
								label: {
									show: true,
									fontSize: 18,
									fontWeight: 'bold',
								},
							},
							labelLine: {
								show: true,
							},
							data: this.chartData,
						},
					],
				}
				option && this.chart.setOption(option)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pie-chart {
		width: 100%;
		height: 100%;
	}
</style>
